(function ($) {
    'use strict';
    //-----------------左侧 商品分类 下拉框--------------------------
    $('#focus-category').find('.dropdown')
        .dropdown({css3: false, js: true, animation: 'fadeSlideLeftRight',delay: 100, active: 'dropdown'})  //绑定下拉框功能
        .on('focus_category_load', function (e) {
            loadOnce($(this), createCategoryDetails); // 绑定该模块下的load事件
        });

    // $elem 是每一个 dropdown(下拉框)
    let loadOnce = function ($elem, success) {
        let dataLoad = $elem.data('load'); // js 里面已经判断过,该属性必然存在
        $.getJSON(dataLoad).done(function (data) {
            if (typeof success === 'function') success($elem, data);
        }).fail(function () {
            $elem.data('loaded', false);
        });
    };
    let createCategoryDetails = function ($elem, data) {
        let html = '';
        for (let i = 0; i < data.length; i++) {
            html += '<dl class="category-details cf"><dt class="category-details-title fl"><a href="#" target="_blank" class="category-details-title-link">' + data[i].title + '</a></dt><dd class="category-details-item fl">';
            for (let j = 0; j < data[i].items.length; j++) html += '<a href="#" target="_blank" class="link">' + data[i].items[j] + '</a>';
            html += '</dd></dl>';
        }
        $elem.find('.dropdown-layer').html(html);
        /*
        <dl class="category-details cf">
            <dt class="category-details-title fl"><a href="#" target="_blank" class="category-details-title-link">手机通讯</a></dt>
            <dd class="category-details-item fl">
                <a href="#" target="_blank" class="link">手机</a>
                <a href="#" target="_blank" class="link">对讲机</a>
                <a href="#" target="_blank" class="link">以旧换新</a>
                <a href="#" target="_blank" class="link">手机维修</a>
            </dd>
        </dl>
         */
    };

})(jQuery);